<template>
<div>
  <div class="">
     <div class="img-top"></div>
  </div>
  <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
  <el-menu-item index="1" class='border-hover'>全选</el-menu-item>
  <el-menu-item index="3" class='border-hover'>亚洲</el-menu-item>
  <el-menu-item index="4" class='border-hover'>欧洲</el-menu-item>
  <el-menu-item index="4" class='border-hover'>美洲</el-menu-item>
  <el-menu-item index="4" class='border-hover'>澳洲</el-menu-item>
  <el-menu-item index="4" class='border-hover'>海岛</el-menu-item>
  <el-menu-item index="4" class='border-hover'>非洲</el-menu-item>
</el-menu>
</div>
</template>

<script>
// import App from './App.vue'
import Vue from 'vue'
import { Menu, MenuItem } from 'element-ui'

Vue.use(Menu)
Vue.use(MenuItem)

export default {
  name: '',
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1'
    }
  },
  methods: {
    handleSelect (key, keyPath) {
      console.log(key, keyPath)
    }
  }
}
</script>

<style lang="scss" scoped>
  .img-top {
    width: 100%;
    height: 600px;
    background-color: pink;
  }
  .border-hover {
    margin-left: 50px;
    width: 70px;
  }
  .el-menu-demo{
     :nth-child(1) {
       color:grey;
     }
    .border-hover:hover  {
       background-color: green;
     }
  }
</style>
